fix(webapp): fade overflowing side menu selector labels - #4412
Conversation
The org, project, and environment selector rows each rendered their own plain span, so long names hard-clipped mid-character (and the environment name ended in an ellipsis). They now use SideMenuLabel, which masks the right edge only while the text actually overflows, matching the rest of the menu. The mask moved into a shared labelOverflowFade module so EnvironmentLabel can reuse it; that component already measured overflow for its tooltip, so no second observer was needed.
|
WalkthroughAdds a shared gradient-mask helper for right-edge label overflow. SideMenuLabel and EnvironmentLabel use the helper when text is clipped. Organization and project selector labels now use SideMenuLabel, while the environment selector removes its ellipsis class and documents fade behavior. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Un-export the mask constant (only used inside the module) and fold the truncate check into the overflow argument.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
2 participants
Long organization, project, and environment names in the side menu were cut off mid-character. They now fade out at the right edge like the rest of the side menu items already did.
Example of faded long names: